<template>
	<view class="content">
		<template v-if='!isShowDetail'>
			<view class="age_content">
				<view class="survey_title">
					年龄阶段 <text>(多选)</text>
				</view>
				<view class="sub_box">
					<text class="active">不限</text>
					<text>学前</text>
					<text>小学</text>
					<text>初中</text>
					<text>高中</text>
					<text>成人</text>
				</view>
			</view>
			<view class="age_content">
				<view class="survey_title">
					机构类型 <text>(多选)</text>
				</view>
				<view class="sub_box">
					<text class="active">不限</text>
					<text>幼儿园</text>
					<text>职业培训</text>
					<text>文化课</text>
					<text>幼小衔接</text>
					<text>托管</text>
					<text>特色特长</text>
				</view>
			</view>

			<view style="box-sizing: border-box;padding:0 30rpx;position: absolute;bottom: 58rpx;left: 0;right: 0;">
				<view class="pay_btn">
					<text> 确定</text>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="mechanism_title" @click="openPay">
				<image :src="imageUrl+mechanismDetail.mechanismCover"
					style="width: 117rpx;height: 117rpx;margin-right: 28rpx;" mode="">
				</image>
				<view class="mechanism_rt">
					<view class="mechanism_rt_item">
						<text>{{mechanismDetail.mechanismTitle}}</text>
						<image
							:src="mechanismDetail.isHouses?'../../static/img/Collection_out.png':'../../static/img/Collection_in.png'"
							style="width:27rpx;height: 27rpx;" mode="" @click="houseFun(mechanismDetail)">
						</image>
					</view>
					<view class="mechanism_rt_item">

						<image src="../../static/img/place.png" style="width:18rpx;height: 21rpx;" mode=""></image>
						<text>{{mechanismDetail.mechanismAddress}}</text>
					</view>
				</view>
			</view>
			<view class="survey_box">
				<view class="survey_title">
					品牌概况
				</view>
				<view class="survey_detail">
					<text class="survey_label">课程类型</text>
					<view class="survey_content">
						<text class="search_label" style="margin-right: 12rpx;"
							v-for="(item,index) in mechanismDetail.shopCategory">{{item.categoryTitle}}</text>
						<!-- <text class="search_label"
							style="background-color:rgba(200, 79, 193, 0.2);color: #C84FC1;">素描</text> -->
					</view>
				</view>
				<view class="survey_detail">
					<text class="survey_label">招生年龄段</text>
					<view class="survey_content">
						{{mechanismDetail.mechanismAges}}岁
					</view>
				</view>
				<view class="survey_detail">
					<text class="survey_label">包含课程</text>
					<view class="survey_content">
						<text class="kc_name" v-for="(sub,index) in mechanismDetail.shopEntities"
							:key="index">{{sub.shopTitle}}</text>

					</view>
				</view>
				<view class="survey_detail">
					<text class="survey_label">学生数量</text>
					<view class="survey_content">
						{{mechanismDetail.mechanismStudents}}名
					</view>
				</view>
				<view class="survey_detail">
					<text class="survey_label">老师数量</text>
					<view class="survey_content">
						{{mechanismDetail.mechanismTeachers}}名
					</view>
				</view>
				<view class="survey_detail">
					<text class="survey_label">老师学历</text>
					<view class="survey_content">
						{{mechanismDetail.teacherEducation}}
					</view>
				</view>
				<view class="survey_detail">
					<text class="survey_label">学校面积</text>
					<view class="survey_content">
						{{mechanismDetail.mechanismArea||0}}平米
					</view>
				</view>

			</view>
			<view class="adviser_box">
				<view class="survey_title">
					品牌顾问
				</view>
				<view class="occupancy_list_item">
					<image :src="imageUrl+teacher.adviserCover" mode="" style="width:100rpx;height:100rpx;border-radius: 50%;">
					</image>
					<view class="occupancy_rt">

						<view class="search_label">
							<view class="search_label_lf">
								<view>{{teacher.adviserName}}</view>
								<view>{{teacher.adviserPhone}}</view>
							</view>
							<view class="consulting" @click="callPhone(teacher)">
								一键联系
							</view>
						</view>



					</view>

				</view>
			</view>
			<view class="class_report">
				<view class="survey_title">
					报课
				</view>
				<view class="top-wrap">
					<tab id="category" :tab-data="mechanismDetail.shopEntities" :tab-cur-index="categoryCur" :size="80"
						scroll="true" @change="toggleCategory"></tab>
				</view>
				<swiper :current="categoryCur" class="mySwiper" :duration="duration" @change="changeCur"
					@animationfinish="swiperFinish" :disable-touch="isScroll" acceleration="false">
					<swiper-item :key="index" v-for="(item,index) in mechanismDetail.shopEntities">
						<scroll-view scroll-y="true" class="scroll" scroll-top="0">
							<text class="class_report_font">
								{{item.shopContent||''}}
							</text>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<view class="introduce_show">
				<view class="survey_title">
					品牌展示
				</view>
				<view class="banner">
					<swiper class="banner-container" :indicator-dots="indicatorDots" :autoplay="autoplay"
						circular="true" interval="3000" duration="1000" previous-margin="20rpx" next-margin="20rpx">
						<block v-for="(item,index) in mechanismDetail.mechanismBanners" :key="index">
							<swiper-item class="banner-item">
								<view class="banner-box">
									<image class="banner-img" :src="imageUrl+item"></image>
								</view>
							</swiper-item>
						</block>
					</swiper>

				</view>
			</view>
			<view class="introduce_box">
				<view class="survey_title">
					品牌简介
				</view>
				<view class="introduce_conten">
					<text>{{mechanismDetail.mechanismDesc}}</text>
				</view>
			</view>
			<view class="map_box">
				<view class="survey_title">
					位置地图
				</view>
				<view class="address">
					地址:{{mechanismDetail.mechanismAddress}}
				</view>
				<view class="map-body">

					<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude"
						:markers="covers">
					</map>

				</view>
			</view>
			<!-- <view class="adviser_box">
					<view class="survey_title">
						9人正在拼团，可直接参与
					</view>
					<view class="pt_content">
						<view class="pt_item">
							<view class="img_box">
								<image src="../../static/img/checked.png" mode=""></image>
								<text>名称</text>
							</view>
							<view class="start_box">
								<view class="start_box_person">
									<view class="cha_num">
										还差<text>1人</text>拼成
									</view>
									<view class="cha_num">
										剩余23:56:51
									</view>
								</view>
								<view class="pt_btn">
									去拼团
								</view>
							</view>
							
							
						</view>
					</view>
			</view> -->
			<view class="comment_box">
				<view class="survey_title">
					家长访客互动区
				</view>
				<template v-if="commentList.length">
					<view class="comment_content" v-for="(item,index) in commentList" :key="index">
						<image src="../../static/img/nav/my-active.png" style="width: 80rpx;height: 80rpx;" mode="">
						</image>
						<view class="comment_rt">
							<view class="header_name">
								<view class="header_lf">
									<view>
										{{item.userName}}
									</view>
									<uni-rate :size="13" readonly="true" :value="item.commentScore||0" />
								</view>
								<text>{{item.createTime}}</text>
							</view>
							<view class="comment_font">
								{{item.comment}}
							</view>
							<view class="comment_icon">
								<view @click="openModule(item.id,item.id)">
									<uni-icons type="chat" size="15" color="#393939"></uni-icons>
									<text>{{item.commentNums}}</text>
								</view>
								<view>
									<image :src="item.zanImg" style="width: 26rpx;height: 26rpx;"
										@click="dianZanFun(item.id)" mode="">
									</image>
									<text>{{item.commentThumbs}}</text>
								</view>

							</view>
							<view class="reply_box" v-if="item.commentNums" v-for="(reply,index) in item.interactionBos"
								:key="index">
								<text>{{reply.userName}}</text>
								<text>回复</text>
								<text>{{reply.applyUserName}}:</text>
								<text>{{reply.interaction}}</text>

							</view>
						</view>
					</view>
				</template>


			
			<view >
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
			</view>
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="reportFun"
				@buttonClick="buttonClick" />
		</template>
		<!-- 购买弹出 -->
		<view class="pay_box" v-if="isShowPay">
          <view class="module_box" @click="isShowPay=false">

			</view>
			<view class="pay_content" :style="{'height':payStyle?'681rpx':'594rpx'}">
				<uni-icons type="close" size="15" style="position: absolute;top:40rpx;right: 30rpx;"
					@click="isShowPay=false"></uni-icons>
				<view class="mechanism_title">
					<image :src="imageUrl+mechanismDetail.mechanismCover"
						style="width: 117rpx;height: 117rpx;margin-right: 28rpx;" mode=""></image>
					<view class="mechanism_rt">
						<view class="mechanism_rt_item">
							<text>{{mechanismDetail.mechanismTitle}}</text>
							<!-- <image src="../../static/img/Collection_in.png" style="width:27rpx;height: 27rpx;" mode=""></image> -->
						</view>
						<view class="mechanism_rt_item">

							<image src="../../static/img/place.png"
								style="width:18rpx;height: 21rpx;margin-right: 10rpx;" mode=""></image>
							<text>{{mechanismDetail.mechanismAddress}}</text>
						</view>
					</view>
				</view>
				<view class="form_box" v-if="!payStyle">
					<view class="form_item">
						<view>
							<image src="../../static/img/wxPay.png"
								style="width: 44rpx;height: 38rpx;margin-right: 40rpx;" mode=""></image>
							<text style="font-size: 28rpx;font-weight: 500;color: #333;">微信支付</text>
						</view>
						<icon type="success_no_circle" size="22" />
					</view>
					<!-- <view class="form_item">
						<view>
							<image src="../../static/img/zfbPay.png"
								style="width: 44rpx;height: 38rpx;margin-right: 40rpx;" mode=""></image>
							<text style="font-size: 28rpx;font-weight: 500;color: #333;">支付宝支付</text>
						</view>

					</view> -->
				</view>
				<view class="form_box" v-if="payStyle">
					<view class="form_item">
						<text>姓名</text>
						<input type="text" placeholder="请填写真实姓名" placeholder-style="font-size:28rpx;color:#666;"
							v-model="orderUserName" />
					</view>
					<view class="form_item">
						<text>年龄</text>
						<input type="text" placeholder="请填写真实年龄" placeholder-style="font-size:28rpx;color:#666;"
							v-model="orderUserAge" />
					</view>
					<view class="form_item" style="padding: 37rpx 0;">
						<text>科目</text>
						<view class="subject_item" >
							<text :class="{'active':item.isActive}" v-for="(item,index) in mechanismDetail.shopEntities"
								:key="index" @click="changeShop(index)">{{item.shopTitle}}</text>

						</view>
					</view>
				</view>
				<view style="box-sizing: border-box;padding:0 30rpx">
					<view class="pay_btn" @click.stop="startPay" >
						<text>￥{{shopEntitiesData.shopDiscountPrice}}</text>
						<text>立即支付</text>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 分享 -->
		<view class="pay_box" v-if="isShowShare">
			<view class="module_box" @click="isShowShare=false">

			</view>
			<view class="share_content_type">
				<view class="share_style">
					<button type="primary" open-type="share" data-name="pageShare" id="share">
						<view class="share_wx" @click="onShareAppMessage()">
							<view class="style_out">
								<uni-icons type="weixin" color="#fff" size="30"></uni-icons>
							</view>
							<text>微信好友</text>
						</view>
					</button>
					
					<!-- <view class="share_wx">
						<view class="style_out">
							<uni-icons type="images-filled" color="#fff" size="30"></uni-icons>
						</view>
						<text>生成海报</text>
					</view> -->
				</view>
				<view class="pay_btn" style="margin-top: 0;background-color: #E6E6E6;" @click="isShowShare=false">
					<text style="margin:0;color: #333333;">取消</text>

				</view>
			</view>
		</view>
		<!-- 回复 -->
		<view class="pay_box" v-if="isShowComment">
			<view class="module_box" @click="closeModule()">

			</view>

			<view class="share_content">
				<view class="report_input">
					<view class="report_input_title">
						<text>详细信息描述</text>
						<text>{{comment.length}}/100</text>
					</view>
					<textarea maxlength="100" v-model="comment" placeholder="请详细描述您的评论内容" />
				</view>
				<view class="pay_btn" @click="submitFun()">
					<text>确定</text>

				</view>
			</view>
		</view>
		<!-- 打电话 -->
		<view class="pay_box" v-if="isShowPhone">
			<view class="module_box" @click="isShowPhone=false">

			</view>
			<view class="phone_box">
				<view class="phone_box_item">
					{{teacher.adviserPhone}}
				</view>
				<view class="phone_box_item" @click="callPhoneFun(teacher.adviserPhone)">
					呼叫
				</view>
				<view class="pay_btn" style="margin-top: 36rpx;background-color: #E6E6E6;" @click="isShowPhone=false">
					<text style="margin:0;color: #333333;">取消</text>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import tab from "../component/topTab.vue"
	import uniGoodsNav from '../../components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				teacher:{},
				categoryCur: 0,
				duration: 0,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				isShowDetail: true,
				triggered: false,
				isScroll: false,
				current: 0,
				isShowPay: false,
				isShowShare: false,
				payStyle: true,
				isShowPhone: false,
				isShowComment: false,
				subjectList: [{
					name: '幼儿园'
				}],

				options: [{
					icon: '../../static/img/jb.png',
					text: '举报'
				}, {
					icon: '../../static/img/phone.png',
					text: '电话',

					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: '../../static/img/share.png',
					text: '分享',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}],
				buttonGroup: [{
						text: '发起评论',
						backgroundColor: 'linear-gradient(61deg, #FEB621, #FCCA74)',
						color: '#fff'
					},
					{
						text: '我要报课',
						backgroundColor: '#4FC863',
						color: '#fff'
					}
				],
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				id: "", //品牌id
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				mechanismDetail: {}, //品牌详情
				imageUrl: "",
				swiperData: [{
					imgUrl: "../../static/img/noData.png"
				}, {
					imgUrl: "../../static/img/noData.png"
				}, {
					imgUrl: "../../static/img/noData.png"
				}],
				pageRow: 1,
				pageSize: 10,
				commentList: [],
				comment: "", //回复内容
				cityCode: 110101,
				clickId: '', //当前评论的id
				applyUserId: "", //二级回复id
				ptType: "", //拼团类型
				type: "", //type:1秒杀，2拼团 3砍价
				shopEntitiesData: {}, //支付的时候科目数据
				"orderUserAge": "",
				"orderUserName": "",
				isLoading: false, // 是否在加载数据
				isLoadMore:false,
				loadStatus:'more',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
			}
		},
		components: {
			tab,
			uniGoodsNav
		},
		//分享
		onShareAppMessage(res) {
			return {
				// title: this.share.title,
				// path: this.share.path,
				// imageUrl: this.share.imageUrl,
				// desc: this.share.desc,
				// content: this.share.content,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		onReachBottom() { //上拉触底函数
		console.log(this.isLoadMore)
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true;
				this.loadStatus='loading';
				this.pageRow += 1
				this.gieCommentList();
			}
			
		},
		onLoad(data) {

			//type:1秒杀，2拼团 3砍价
			//ptType :拼团类型 0正在拼团 1马上开团
			this.id = data.id;
			this.type = data.type;
			this.ptType = data.ptType
		},
		onShow() {
			this.getDetail();
			this.gieCommentList();

		},
		methods: {
			callPhoneFun(num){
				uni.makePhoneCall({
				 	
				 // 手机号
				    phoneNumber:num, 
				// 成功回调
				success: (res) => {
				console.log('调用成功!')	
				},
				// 失败回调
				fail: (res) => {
				console.log('调用失败!')
				},
				})
			},
			callPhone(){
				this.isShowPhone=true;
			},
			//关闭回复弹窗
			closeModule(e) {
				console.log(e)
				this.isShowComment = false;

			},
			//切换科目
			changeShop(index) {
				this.mechanismDetail.shopEntities.forEach((a, i) => {
					a.isActive = false;
					if (index == i) {
						a.isActive = true;
						this.shopEntitiesData = a;
					}
				})
			},
			submitFun() {

				this.$http.post('/api/user/replyUserComment', {
					areaCode: this.cityCode,
					"commentId": this.clickId,
					"interaction": this.comment,
					"interactionId": this.applyUserId
				}, 'application/json').then((data) => {
					console.log(data.data.code)
					if (data.data.code == 200) {
						uni.showToast({
							title: '回复成功',
							icon: "success",
							duration: 2000,

						});
						setTimeout(() => {
							this.isShowShare = false;
							this.gieCommentList();
						}, 1000)
					} else {
						uni.showToast({
							title: data.data.message,
							icon: "none",
							duration: 2000,

						});
					}
				}).catch(() => {
					uni.showToast({
						title: '回复失败',
						icon: "none",
						duration: 2000,

					});
				})
			},
			//回复
			openModule(id, applyUserId) {
				this.clickId = id;
				this.applyUserId = applyUserId;
				this.isShowComment = true;
				this.comment = "";

			},

			//举报
			reportFun(e) {
				if (e.index == 0) {
					uni.navigateTo({
						url: '../subjectSub/report?id=' + this.id
					});
				} else if (e.index == 1) {
					this.isShowPhone = true;
				} else if (e.index == 2) {
					this.isShowShare = true;
				}

			},
			//发起评论
			buttonClick(e) {
				if (e.index == 0) {
					uni.navigateTo({
						url: '../subjectSub/comment?id=' + this.id + '&type=' + 1
					});
				} else if (e.index == 1) {
					this.isShowPay = true;
					this.payStyle=true;
				}

			},
			//点赞
			dianZanFun(id) {
				this.$http.get('/api/user/thumpsComment/' + id).then((data) => {
					if (data.data.code == 200) {

						this.gieCommentList();
					} else {
						this.zanImg = "../../static/img/zan_out.png"
					}
				})
			},
			//收藏
			houseFun(row) {
				if (row.isHouses) {
					this.$http.get('/api/user/userHousesOperation', {
						areaCode: this.cityCode,
						id: row.id,
						type: 2
					}).then((data) => {
						if (data.data.code == 200) {
							uni.showToast({
								title: '收藏成功!',
								icon: "success",
								duration: 2000,

							});
							this.getDetail()

						} else {
							uni.showToast({
								title: data.data.message,
								icon: "none",
								duration: 2000,

							});
						}
					})
				} else {
					uni.showToast({
						title: '您已收藏',
						icon: "none",
						duration: 2000,

					});
				}
			},
			//开始支付
			startPay() {
				if(this.payStyle){
					this.payStyle=false;
				}else{
					this.$http.post('/api/order/orderToken', {
					
					}, "application/json").then((data) => {
						if (data.data.code == 200) {
					        
							this.buy(0)
					
						}
					})
				}
				

			},
			//正常支付接口
			buy(type) {
				let params = {};
				if (!type) { //正常购买
					params = {
						"id": this.shopEntitiesData.id,
						orderUserName: this.orderUserName,
						orderUserAge: this.orderUserAge,
						"type": type
					}
				}

				this.$http.post('/api/order/buy', {
					...params
				}, "application/json").then((data) => {
					if (data.data.code == 200) {
						let result = JSON.parse(data.data.result);
						console.log(result);
						this.wxPayment(result)
					} else {
						uni.showToast({
							title: data.data.message,
							icon: "none",
							duration: 2000,

						});
					}
				})
			},
			//活动支付
			auctionBuy(type) {
				let params = {};
				//活动购买  1秒杀 2拼团 3砍价
				if (type == 1) {
					params = {
						"id": this.id,
						"type": type
					}
				} else if (type == 2) {
					if (this.ptType == 0) { //正在拼团
						params = {
							auctionType: 1,
							"id": this.id,
							"type": type
						}
					} else { //马上开团
						params = {
							auctionType: 0,
							"id": this.id,
							"type": type
						}
					}
				} else if (type == 3) {
					params = {
						"id": this.id,
						"type": type
					}
				}
				this.$http.post('/api/order/auctionBuy', {
					...params,
					"orderUserAge": this.orderUserAge,
					"orderUserName":this.orderUserName,
				}, "application/json").then((data) => {
					if (data.data.code == 200) {
						let result = JSON.parse(data.data.result);
						console.log(result);
						this.wxPayment(result)
					} else {
						uni.showToast({
							title: data.data.message,
							icon: "none",
							duration: 2000,

						});
					}
				})
			},
			//微信支付
			wxPayment(result) {
				var _that = this;
				wx.requestPayment({
					timeStamp: result.timeStamp,
					nonceStr: result.nonceStr,
					package: result.package,
					signType: 'MD5',
					paySign: result.sign,
					success: function(res) {
                        uni.showToast({
							title: "报课成功",
							icon: 'success',
							mask: true
						})
						that.isShowPay=false;
					},
					fail: (res) => {
						uni.showToast({
							title: "支付失败，请重试！",
							icon: 'none',
							mask: true
						})
					},
					complete: () => {
						_that.loading = false;
					}
				})
			},
			//评论列表
			gieCommentList() {
				this.$http.get('/api/mechanism/mechanismDetailComment', {
					areaCode: this.cityCode,
					commentType: 1,
					id: this.id,
					pageRow: this.pageRow,
					pageSize: this.pageSize
				}).then((data) => {
					if (data.data.code == 200) {
						if(this.pageRow!=1){
							this.commentList=this.commentList.concat(data.data.result.records);
						}else{
							this.commentList = data.data.result.records || [];
						}
						
						if (this.commentList.length) {
							this.commentList.forEach((a, i) => { //这里需要处理是否点赞
								a.zanImg = "../../static/img/zan_out.png"
							})
						}
						this.imageUrl=data.data.imageUrl;
						if (data.data.result.records.length) {
							if (data.data.result.records.length < this.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.loadStatus = 'nomore';
								
							} else {
								this.isLoadMore = false;
								this.loadStatus = 'more';
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
					}
				}).catch(()=>{
					this.isLoadMore = true
					this.loadStatus = 'nomore'
				})
			},
			//获取品牌详情
			getDetail() {
				this.$http.get('/api/mechanism/mechanismDetail/' + this.id).then((data) => {
					if (data.data.code == 200) {
						this.mechanismDetail = data.data.result || {};
						if (this.mechanismDetail.shopEntities.length) {
							if(this.mechanismDetail.teachers.length){
								this.teacher=this.mechanismDetail.teachers[0]
							}
							this.mechanismDetail.shopEntities.forEach((a, i) => {
								a.isActive = false;
								if (i == 0) {
									a.isActive = true;
									this.shopEntitiesData = a; //科目数据
								}
							})
						}
						// if(this.mechanismDetail.shopEntities.length){
						// 	this.mechanismDetail.shopEntitie.forEach((a,i)=>{
						// 		a.categoryTitle=a.shopTitle
						// 	})
						// }
						this.imageUrl = data.data.imageUrl;
					} else {
						uni.showToast({
							title: data.data.message,
							icon: "none",
							duration: 2000,

						});
						this.mechanismDetail = {};
					}
				})
			},
			closePay() {
				this.isShowPay = false;
			},
			openPay() {
				this.isShowPay = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/mechanismDetail.scss'
</style>
